<template>
	<view class="content">
		<view class="title">
			<text class="iconfont icon-shop"></text>
			<text>优购生活馆</text>
		</view>
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="toItem(item.goodsId)">
				<text class="iconfont" :class="item.checked?'icon-checked':'icon-uncheck'" @click.stop="toggleCheck(item)"></text>
				<image :src="item.goods_small_logo" alt="" />
				<view class="right">
					<text class="text-line2">{{item.goods_name}}</text>
					<view class="btm">
						<text class="price">￥<text>{{item.goods_price}}</text>.00</text>
						<view class="goods-num">
							<button @click.stop="sub(item)" :disabled="item.num===1">-</button>
							<text>{{item.num}}</text>
							<button @click.stop="add(item)">+</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="account">
			<view class="select-all">
				<text class="iconfont" :class="isAll?'icon-checked':'icon-uncheck'" @click="toggleCheckAll"></text>
				<text>全选</text>
				<view class="price-wrapper">
					<view class="price">
						<text>合计:<text class="num">￥{{totalPrice}}.00</text></text>
						<view class="info">包含运费</view>
					</view>
					<view class="account-btn" @click="toPay">结算({{totalNum}})</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: []
			}
		},
		watch: {
			// 监听goodsList的改变
			goodsList: {
				handler() {
					// 这里获取到的变化就是goodsList
					// console.log(newVal)
					// 把goodsList更新storage cart; 
					// goodslist已经有我们需要更新到storage cart里面的所有数据
					this.$store.commit('updateCart',this.goodsList)
				},
				deep:true
			}
		},
		computed: {
			// 总数量
			totalNum() {
				// 遍历所有的商品，把勾选的商品数量相加
				/*
				let sum = 0
				this.goodsList.forEach(item => {
					sum += item.checked ? item.num : 0
				})
				return sum*/
				return this.goodsList.reduce((sum, item) => {
					return sum + (item.checked ? item.num : 0)
				}, 0)
			},
			totalPrice() {
				// 总价格=所有勾选的商品数量*商品价格之和
				return this.goodsList.reduce((sum, item) => {
					return sum + (item.checked ? item.num * item.goods_price : 0)
				}, 0)
			},
			isAll: {
				get() {
					// 所有商品选中，全选就选中
					//1. 所有选中的商品的个数是否和goodsList相等
					/*
					let count =0
					this.goodsList.forEach(item=>{
						if(item.checked){
							count++
						}
					})
					
					if(this.goodsList.length===count){
						return true
					}else{
						return false
					}
					*/
					// 2. 只要有一个商品不选中的话，全选就不选中
					// forEach不能中断
					// this.goodsList.forEach(item=>{
					//  console.log(item)
					//  if(!item.checked){
					// 	 return false
					//  }
					// })
					// return true
					// // 找一个商品不选中的
					// let goods= this.goodsList.find(item=>{
					//  return !item.checked
					// })
					// if(goods){
					//  return false
					// }else{
					//  return true
					// }
					// 3. 所有商品选中，全选就选中
					return this.goodsList.every(item => {
						return item.checked
					})
				},
				// 全选的状态设置给所有的商品
				set(status) {
					// console.log(status)
					this.goodsList.forEach(item => {
						item.checked = status
					})
				}
			}
		},
		onShow() {
			// 初次进行购物车,或者后续切换到购物车页面,获取最新的storage数据
			this.cart = this.$store.getters.getCart
			this.queryGoodsList()
			// 为购物车设置右上角添加文本
			uni.setTabBarBadge({
				index:2,
				text:this.cart.length+''
			})
		},
		methods: {
			// 跳转支付页
			toPay(){
				// 判断商品数量,如果为0,提示
				if(!this.totalNum){
					wx.showToast({
						title:'请选择商品,再结算',
						icon:'none'
					})
					return
				}
				// 如果没有登录态,就跳转
				let token = uni.getStorageSync('token')
				if(!token){
					uni.navigateTo({
						url:'/pages/login/login'
					})
					// 如果没有return后面的语句还会执行
					return
				}
				// 跳转支付页
				uni.navigateTo({
					url:'/pages/pay/pay'
				})
			},
			// 跳转商品详情
			toItem(goodsId){
				uni.navigateTo({
					url:'/pages/item/item?goodsId='+goodsId
				})
			},
			// 全选点击
			toggleCheckAll() {
				this.isAll = !this.isAll
			},
			// 商品勾选/不勾选
			toggleCheck(item) {
				item.checked = !item.checked
			},
			// --
			sub(item) {
				item.num--
			},
			// ++
			add(item) {
				item.num++
			},
			// 查询购物车中商品列表
			async queryGoodsList() {
				/*
				let idsStr=''
				this.cart.forEach(item=>{
					idsStr+=item.goodsId+','
				})
				// idsStr.substr 去掉最后一个/
				*/
				let idsArr = this.cart.map(item => {
					return item.goodsId
				})
				let idsStr = idsArr.join(',')
				// 如果storage购物车为空,不请求
				if (!idsStr) {
					return
				}

				let _goodsList = await this.$request({
					url: '/api/public/v1/goods/goodslist?goods_ids=' + idsStr
				})

				// _goodsList是无序的
				//合并_goodslist和cart,以cart为主
				this.goodsList = this.cart.map(item => {
					// 在goodsList里面找一个对象的goodsId也等于item.goodsId
					let targetGoods = _goodsList.find(goods => {
						return goods.goods_id === item.goodsId
					})
					return { ...item,
						...targetGoods
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.iconfont {
		font-size: 44rpx;
	}

	.title {
		height: 88rpx;
		display: flex;
		align-items: center;

		.iconfont {
			color: #999;
			margin: 6rpx 12rpx 0 32rpx;
		}
	}

	.goods-item {
		height: 206rpx;
		background-color: #fff;
		border-top: 1rpx solid #ddd;
		display: flex;
		box-sizing: border-box;
		align-items: center;

		.iconfont {
			color: #eb4450;
			margin: 0 30rpx;
		}

		image {
			width: 160rpx;
			height: 160rpx;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			margin: 0 20rpx 0 18rpx;

			.btm {
				display: flex;
				margin-top: 40rpx;
				justify-content: space-between;

				.price {
					color: #eb4450;

					>text {
						font-size: 24px;
					}
				}

				.goods-num {
					display: flex;
					align-items: center;

					button {
						width: 60rpx;
						height: 50rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: center;
						align-items: center;
						border: 4rpx solid #666;
					}

					text {
						margin: 0 30rpx;
					}
				}
			}
		}
	}

	.goods-list {
		position: absolute;
		bottom: 98rpx;
		top: 88rpx;
		width: 100%;
		overflow: auto;
		padding-bottom: 60rpx;
		background-color: #f4f4f4;
	}

	.account {
		height: 98rpx;
		border-bottom: 1rpx solid #ddd;
		display: flex;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		align-items: center;

		.iconfont {
			color: #eb4450;
			margin: 0 30rpx;
		}

		.account-btn {
			width: 230rpx;
			height: 98rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			background-color: #eb4450;
		}

		.select-all {
			flex: 1;
			display: flex;
			align-items: center;

			.price-wrapper {
				display: flex;
				flex: 1;
				justify-content: flex-end;
				align-items: center;
			}
		}

		.price {
			margin-right: 20rpx;

			.num {
				color: #eb4450;
			}

			.info {
				color: #999;
			}
		}
	}
</style>
